<script setup lang="ts">
// #ifdef MP
import { onAddToFavorites, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
import { wxCollect, wxShare } from '@/libs/share'

onShareAppMessage(wxShare(true))
onShareTimeline(wxShare(false))
onAddToFavorites(wxCollect())
// #endif

import { onMounted, onUnmounted } from 'vue'

import { list, update, select, clear } from './data'

onMounted(update)
onUnmounted(clear)
</script>

<template>
  <PageWrapper
    name="quiz-mbti-result-history"
    :pageStyle="{ backgroundColor: '#C3A7DF' }"
  >
    <div
      v-for="(item, idx) in list"
      :key="idx"
      class="item"
    >
      <div class="name">{{ item.typeName }}</div>
      <div class="time">{{ item.createdTime }}</div>
      <div
        class="btn"
        @click="select(item)"
      >查看</div>
    </div>
  </PageWrapper>
</template>

<style lang="less" scoped>
.item {
  position: relative;
  width: 686rpx;

  margin: 32rpx auto 0;

  box-sizing: border-box;
  padding: 40rpx 32rpx;

  border-radius: 32rpx;
  background-color: #FEF0FF;
  box-shadow: 0 4rpx 8rpx 0 rgba(116, 61, 167, .46);

  .name {
    color: #1F0237;
    font-size: 40rpx;
    line-height: 32rpx;
  }

  .time {
    margin-top: 16rpx;

    color: rgba(31, 2, 55, .58);
    font-size: 28rpx;
    line-height: 32rpx;
  }

  .btn {
    position: absolute;
    top: 50%;
    right: 32rpx;
    transform: translateY(-50%);

    padding: 16rpx 54rpx;
    border-radius: 60rpx;
    border: 2px solid #B176FF;

    background-color: #8E46F3;
    box-shadow: 0 2rpx 2rpx 0 rgba(84, 0, 136, .3), 0 2rpx 2rpx 0 rgba(#fff, .57) inset, 0 0 8rpx 0 rgba(233, 196, 255, .51) inset;

    color: #fff;
    font-size: 32rpx;
    line-height: 32rpx;
  }
}
</style>